<template>
  <div class="particular-vip">
    <div class="homes">
      <label>{{ props.data.name }}</label>
      <div style="float: right; margin: 4px 4px 4px 16px">
        <el-button
          v-if="!data.isBc"
          @click="(data.isBc = true), (data.isfkuo = false)"
          :type="data.isfkuo ? 'primary' : 'success'"
          >{{ data.bjok }}</el-button
        >
        <el-button
          v-if="data.isBc"
          @click="(data.isBc = false), (data.isfkuo = true)"
          type="info"
          >取消</el-button
        >
        <el-button v-if="data.isBc" @click="save" type="success"
          >保存</el-button
        >
      </div>
      <el-tooltip class="box-item" effect="dark" content="删除" placement="top">
        <div @click="deleVip" class="bq">
          <i class="iconfont icon-shanchu"></i>
        </div>
      </el-tooltip>
    </div>
    <div class="infos">
      <div>
        <el-descriptions
          class="margin-top"
          label-width="150px"
          :column="2"
          :size="size"
          border
        >
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <el-icon :style="iconStyle"> </el-icon>
                会员名称
              </div>
            </template>
            <label v-if="data.isfkuo">{{ props.data.name }}</label>
            <el-input
              v-if="!data.isfkuo"
              style="width: 200px"
              v-model="props.data.name"
              placeholder="请输入会员名称"
            />
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item" style="height: 35px">
                <el-icon :style="iconStyle"> </el-icon>
                会员等级
              </div>
            </template>

            <label v-if="data.isfkuo">{{ props.data.level }}</label>
            <el-input-number
              v-if="!data.isfkuo"
              v-model="props.data.level"
              style="width: 180px"
              :min="1"
              :max="10000"
            />
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <el-icon :style="iconStyle">
                  <location />
                </el-icon>
                会员折扣
              </div>
            </template>

            <label v-if="data.isfkuo">{{ props.data.foeverDiscount }}</label>
            <el-input-number
              v-if="!data.isfkuo"
              v-model="props.data.foeverDiscount"
              style="width: 200px"
              :min="0.1"
              :step="0.1"
              :max="10"
            />
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <el-icon :style="iconStyle">
                  <tickets />
                </el-icon>
                会员使用人数
              </div>
            </template>
            <el-tag size="small">{{ props.data.conts }}</el-tag> 人
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <el-icon :style="iconStyle">
                  <office-building />
                </el-icon>
                描述
              </div>
            </template>
            <el-scrollbar height="120px">
              {{ props.data.describe }}
            </el-scrollbar>
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <div style="margin-top: 20px">
        <el-descriptions
          class="margin-top"
          title="赠送优惠劵"
          :column="2"
          :size="size"
          border
        >
          <template #extra>
            <el-button @click="data.disVisible = true" type="primary"
              ><label style="font-size: 25px">+</label>折扣券</el-button
            >
            <el-button @click="data.dedVisible = true" type="primary"
              ><label style="font-size: 25px">+</label>抵扣券</el-button
            >
          </template>
        </el-descriptions>
      </div>
      <div class="nhzdy">
        <div class="diss">
          <!-- 折扣券表格 -->
          <el-table
            :data="dis.discountList"
            border
            style="width: 100%; height: 240px"
          >
            <el-table-column fixed type="index" width="40" />
            <el-table-column
              fixed
              prop="DDiscount"
              sortable
              label="折扣"
              width="80"
            />
            <el-table-column
              prop="DMaxDiscountCount"
              label="最大折扣"
              sortable
              width="120"
            />
            <el-table-column
              prop="effectiveDay"
              width="120"
              label="有效天数"
              sortable
            />
            <el-table-column prop="count" label="数量" sortable />
            <el-table-column fixed="right" label="操作" min-width="80">
              <template #default="scope">
                <el-button
                  type="danger"
                  size="small"
                  @click="deledis(scope.row.id)"
                >
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="deds">
          <!-- 抵扣券表格 -->
          <el-table
            border
            :data="ded.dedcountList"
            style="width: 100%; height: 240px"
          >
            <el-table-column fixed type="index" width="50" />
            <el-table-column
              fixed
              prop="DDeductionCount"
              sortable
              label="抵扣"
              width="80"
            />
            <el-table-column
              prop="effectiveDay"
              width="120"
              label="有效天数"
              sortable
            />
            <el-table-column prop="count" label="数量" sortable />
            <el-table-column fixed="right" label="操作">
              <template #default="scope">
                <el-button
                  type="danger"
                  size="small"
                  @click="deleded(scope.data.id)"
                >
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <!-- 弹窗添加折扣券 -->
    <el-dialog
      v-model="data.disVisible"
      title="添加折扣券"
      width="400"
      align-center
    >
      <span>
        <div style="margin-bottom: 16px; margin-left: 14px">
          <label>折扣券：</label>
          <el-select
            v-model="dis.discount"
            filterable
            placeholder="请选择折扣券"
            style="width: 200px"
          >
            <el-option
              v-for="item in dis.discountListss"
              :key="item.id"
              :label="item.discount"
              :value="item.id"
            />
          </el-select>
        </div>
        <div style="margin-bottom: 16px">
          <label>有效天数：</label>
          <el-input-number
            v-model="dis.effectiveDay"
            style="width: 200px"
            :min="1"
            :max="1000"
          />
        </div>
        <div style="margin-left: 28px">
          <label>数量：</label>
          <el-input-number
            v-model="dis.count"
            style="width: 200px"
            :min="1"
            :max="100"
          />
        </div>
      </span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="data.disVisible = false">取消</el-button>
          <el-button type="primary" @click="addDis"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 弹窗添加抵扣券 -->
    <el-dialog
      v-model="data.dedVisible"
      title="添加抵扣券"
      width="400"
      align-center
    >
      <span>
        <div style="margin-bottom: 16px; margin-left: 14px">
          <label>抵扣券：</label>
          <el-select
            v-model="ded.deductionCount"
            filterable
            placeholder="Select"
            style="width: 200px"
          >
            <el-option
              v-for="item in ded.dedcountListss"
              :key="item.id"
              :label="item.deductionCount"
              :value="item.id"
            />
          </el-select>
        </div>
        <div style="margin-bottom: 16px">
          <label>有效天数：</label>
          <el-input-number
            v-model="ded.effectiveDay"
            style="width: 200px"
            :min="1"
            :max="1000"
          />
        </div>
        <div style="margin-left: 28px">
          <label>数量：</label>
          <el-input-number
            v-model="ded.count"
            style="width: 200px"
            :min="1"
            :max="100"
          />
        </div>
      </span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="data.dedVisible = false">取消</el-button>
          <el-button type="primary" @click="addDed"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, defineProps, ref, computed } from "vue";
import type { ComponentSize } from "element-plus";
import { ElMessageBox } from "element-plus";
import { toast } from "@/tools/tools";
import { Update, VipsDelete } from "@/api/Vip/vips";
import { DedPagination } from "@/api/Vip/Deductions";
import { DisPagination } from "@/api/Vip/Discounts";
import {
  VpiDisAdd,
  VpiDisDelete,
  Get_dg_Disvount,
} from "@/api/Vip/VipDiscounts";
import {
  VpiDedAdd,
  VpiDedDelete,
  Get_dg_Dedvount,
} from "@/api/Vip/VipDeductions";

const size = ref<ComponentSize>("default");

// 状态
const data = reactive({
  isfkuo: true,
  isBc: false,
  bjok: "编辑",
  disVisible: false,
  dedVisible: false,
  pakVisible: false,
  discount: 0.5,
  deductionCount: 1,
  maxDiscountCount: 100,
});

//折扣
const dis = reactive({
  discount: "",
  id: "",
  count: 1,
  effectiveDay: 30,
  discountList: [],
  discountListss: [],
});

//抵扣
const ded = reactive({
  deductionCount: "",
  id: "",
  count: 1,
  effectiveDay: 30,
  dedcountList: [],
  dedcountListss: [],
});

//分页
const datas = reactive({
  page: 1,
  limit: 10,
  total: 0,
});

//删除折扣
const deledis = (id: string) => {
  console.log(id);
  ElMessageBox.confirm("确定要删除吗?", "删除提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    const res = await VpiDisDelete({
      id: id,
    });
    if (res.code >= 0) {
      toast.success(res.message);
      bind();
    } else {
      toast.error(res.message);
    }
  });
};

//删除抵扣
const deleded = (id: string) => {
  ElMessageBox.confirm("确定要删除吗?", "删除提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    const res = await VpiDedDelete({
      id: id,
    });
    if (res.code >= 0) {
      toast.success(res.message);
      bind();
    } else {
      toast.error(res.message);
    }
  });
};
const emit = defineEmits(["close-drawer"]);

//删除vip
const deleVip = async () => {
  if (props.data.conts > 0) {
    toast.success(`该会员还有${props.data.conts}个人在使用，不能删除！`);
    return;
  }
  ElMessageBox.confirm("确定要删除吗?", "删除提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    const res = await VipsDelete({
      id: props.data.id,
    });
    if (res.code === 0) {
      toast.success(res.message);
      emit("close-drawer");
    } else {
      toast.error(res.message);
    }
  });
};

//获取父级数据
const props = defineProps({
  data: {
    type: Object,
    default: () => ({}),
    required: true,
  },
});

//保存
const save = async () => {
  const res = await Update(props.data);
  if (res.code >= 0) {
    toast.success(res.message);
    data.bjok = "编辑";
    data.isfkuo = true;
    data.isBc = false;
  } else {
    toast.error(res.message);
  }
};

//添加折扣券
const addDis = async () => {
  const res = await VpiDisAdd({
    vipId: props.data.id,
    discountId: dis.discount,
    count: dis.count,
    effectiveDay: dis.effectiveDay,
  });
  if (res.code >= 0) {
    data.disVisible = false;
    toast.success(res.message);
    bind();
  } else {
    toast.error(res.message);
  }
};

//添加抵扣券
const addDed = async () => {
  const res = await VpiDedAdd({
    vipId: props.data.id,
    count: ded.count,
    deductionId: ded.deductionCount,
    effectiveDay: ded.effectiveDay,
  });
  if (res.code >= 0) {
    toast.success(res.message);
    data.dedVisible = false;
    bind();
  } else {
    toast.error(res.message);
  }
};

// 计算icon样式
const iconStyle = computed(() => {
  const marginMap = {
    large: "8px",
    default: "6px",
    small: "4px",
  };
  return {
    marginRight: marginMap[size.value] || marginMap.default,
  };
});

// 获取折扣券和抵扣券
const binds = async () => {
  const res = await DisPagination({
    page: datas.page,
    limit: datas.limit,
  });
  if (res.code >= 0) {
    dis.discountListss = res.data.data;
  }
  const ress = await DedPagination({
    page: datas.page,
    limit: datas.limit,
  });
  if (ress.code >= 0) {
    ded.dedcountListss = ress.data.data;
  }
};

// 获取折扣券和抵扣券表格
const bind = async () => {
  const res = await Get_dg_Dedvount({
    id: props.data.id,
  });
  if (res.code >= 0) {
    ded.dedcountList = res.data.data;
  }
  const ress = await Get_dg_Disvount({
    id: props.data.id,
  });
  if (ress.code >= 0) {
    dis.discountList = ress.data.data;
  }
};

// 初始加载
onMounted(() => {
  data.isfkuo = true;
  bind();
  binds();
});
</script>

<style scoped>
.particular-vip {
  width: calc(100% - 36px);
  height: calc(100% - 40px);
  padding: 10px 16px 14px 14px;
  background-color: #fff;
  border-radius: 10px;
}
.homes {
  height: 56px;
}
.homes label {
  font-size: 25px;
}
.bq {
  height: 30px;
  width: 35px;
  background-color: #f5f5f5;
  border-radius: 6px;
  margin: 4px;
  float: right;
  text-align: center;
  padding-top: 6px;
}
.bq:hover {
  background-color: #e6e6e6;
}
.infos {
  height: calc(100% - 70px);
}

.nhzdy {
  display: flex;
  width: 100%;
  height: 250px;
}
.diss {
  width: calc(50% - 8px);
  height: calc(250px - 8px);
  margin: 4px;
}
.deds {
  width: calc(50% - 8px);
  height: calc(250px - 8px);
  margin: 4px;
}
</style>
